<template>
  <el-table :data="userTableData" style="width: 100%; height:800px">
    <el-table-column align="center" label="用户名" prop="username" width="120"/>
    <el-table-column align="center" label="昵称" prop="nickname" width="200"/>

    <el-table-column align="center" label="登陆地址" prop="ip" width="200"/>

    <el-table-column align="center" label="操作" min-width="50" prop="isActive">
      <template #default="scope">
        <el-button link size="small" type="primary" @click="handleOfflineUser(scope.row)">强制退出</el-button>
      </template>
    </el-table-column>

  </el-table>

</template>

<script lang="ts" setup>
import {onMounted, onUnmounted, ref} from "vue"
import {
  forceOfflineUserBySSE,
  getOnlineUserByWebSocket
} from "@/api/system/sysUser";
import message from '@/utils/ElmessasgeUtils'
import type {SysUserInfo} from "@/type/systemConfig/sysUserInfo";



const userTableData = ref<SysUserInfo[]>()

function updateUserList() {
  getOnlineUserByWebSocket().then(res => {
    if (res.data.code === 200) {
      userTableData.value = res.data.data
    } else {
      message.message('获取用户将列表失败', 'error')
    }
  })
}

function handleOfflineUser(row: any) {
  forceOfflineUserBySSE(row.username, row.ip).then((res: any) => {
    if (res.data.code === 200) {
      console.log("强制退出成功")
      updateUserList()
    }
  })
}

// 断开连接 (可选)
onUnmounted(() => {

});
onMounted(() => {
  updateUserList();
})

</script>